<template>
  <view class="container">
    <!-- 上次对账时间 -->
    <view class="last-check-time">
      <text class="time-text">上次对账时间：2025-12-01 15:00:00</text>
    </view>

    <!-- 待对账总额标题 -->
    <view class="title">
      <text class="title-text">待对账总额</text>
    </view>

    <!-- 对账项目列表 -->
    <view class="check-list">
      <view class="check-item" v-for="(item, index) in checkItems" :key="index">
        <text class="item-name">{{ item.name }}</text>
        <text class="item-value">{{ item.value }}</text>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="btn-container">
      <button class="submit-btn" @click="handleSubmit">提交对账</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 对账项目数据
      checkItems: [
        { name: '预存款', value: '123456' },
        { name: '游戏币', value: '45466' },
        { name: '游乐币', value: '123456' },
        { name: '彩票', value: '45466' },
        { name: '电子彩票', value: '123456' },
        { name: '积分', value: '45466' }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.shangmengCheckout')
  	});
  },
  methods: {
    // 提交对账处理
    handleSubmit() {
      uni.showToast({
        title: '对账提交成功',
        icon: 'success'
      });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 30rpx;
}

/* 上次对账时间 */
.last-check-time {
  padding: 25rpx 0;
  background-color: #ffffff;
  padding-left: 30rpx;
  border-radius: 8rpx 8rpx 0 0;
}

.time-text {
  font-size: 30rpx;
  color: #666666;
}

/* 标题样式 */
.title {
  background-color: #ffffff;
  padding: 30rpx 30rpx;
  border-top: 1px solid #eeeeee;
}

.title-text {
  font-size: 34rpx;
  color: #333333;
  font-weight: bold;
}

/* 对账列表 */
.check-list {
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
}

/* 对账项 */
.check-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 30rpx;
  border-bottom: 1px solid #eeeeee;
}

/* 最后一项去除下边框 */
.check-item:last-child {
  border-bottom: none;
}

.item-name {
  font-size: 32rpx;
  color: #333333;
}

.item-value {
  font-size: 32rpx;
  color: #ff3b30; /* 数值红色 */
}

/* 按钮容器 */
.btn-container {
  padding: 40rpx 0;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #ff3b30; /* 红色按钮 */
  color: #ffffff;
  font-size: 34rpx;
  border-radius: 8rpx;
}
</style>